<!--
 * @Description: file content
 * @Author: Wenmin He
 * @Date: 2021-07-02 17:25:17
 * @LastEditors: Wenmin He
 * @LastEditTime: 2021-07-16 03:48:48
-->
<template>
  <view class="successful-component">
    <view class="img-content">
      <img class="img-box" src="https://szgd-dev.tgovcloud.com/public/images/suc.png" alt="" />
      <view class="text-content" v-if="!checkouted">
        <view>已完成</view>
        <slot name="subTips"></slot>
      </view>
      <view  class="text-content" v-if="checkouted">
        <view>{{person}}</view>
        <view>已完成离点登记</view>
      </view>
    </view>

    <view class="userInfo" v-if="!checkouted">
      <view class="userItem">
        <view class="userLeft">登记时间</view>
        <view class="userRight"><span class="curYear">{{date}}</span></view>
      </view>
      <view class="userItem">
        <view class="userLeft">登记人员</view>
        <view class="userRight">{{personalName}}</view>
      </view>
    </view>
    
    <view class="button-wrapper">
      <view v-if="sLbtn" class="button default" @click="onLeftBtnClick">
        <slot name="leftBtnText"></slot>
      </view>
      <view v-if="sRbtn" class="button modify" @click="onRightBtnClick">
        <slot name="rightBtnText"></slot>
      </view>
    </view>
    <!-- <view class="button-bottom" v-if="scanBtn">
      <view class="button primary" @click="onScan">扫描下一个</view>
    </view> -->
  </view>
</template>

<script>
// import { scanCode } from "@/utils";
import dayjs from 'dayjs'

export default {
  props: {
    sLbtn: true,
    sRbtn: true,
    scanBtn: false,
    checkouted: false,
    person:'',
  },
  data() {
    return {
      date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      personalName: '',
    };
  },
  created() {
    this.personalName = uni.getStorageSync("personalInfo").name
  },
  methods: {
    // goHome() {
    //   uni.switchTab({
    //     url: `../index/index`,
    //   });
    // },
    onLeftBtnClick() {
      this.$emit("onLeftBtnClick");
    },
    onRightBtnClick() {
      this.$emit("onRightBtnClick");
    },
    // onScan() {
    //   scanCode((data) => {
    //     this.$emit("onScan", data);
    //   });
    // },
  },
};
</script>

<style scoped lang="scss">
.successful-component {
  text-align: center;
  background: #f9f9f9;
  height: 100vh;
  .img-content {
    height: 638rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    img {
      width: 178rpx;
      height: 226rpx;
    }
    .img-box {
      margin-top: 160rpx;
    }
    .text-content {
      text-align: center;
      font-size: 40rpx;
      font-weight: bold;
      line-height: 60rpx;
      color: #333;
      margin-top: 56rpx;
    }
  }
  .userInfo{
    background-color: #ffffff;
    margin-top: 32rpx;
    .userItem{
      display: flex;
      height: 96rpx;
      line-height: 96rpx;
      box-sizing: border-box;
      padding: 0 32rpx;
      .userLeft{
        color: #999999;
        text-align: left;
        font-size: 30rpx;
      }
      .userRight{
        flex: 1;
        color: #666666;
        text-align: right;
        font-size: 34rpx;
      }
    }
  }
  // .curYear{
  //   // padding-right: 30rpx;
  // }
  .button-wrapper {
    // display: flex;
    justify-content: space-between;
    padding: 0 32rpx;
    margin-top: 50rpx;
  }
  .button-bottom {
    position: absolute;
    bottom: 58rpx;
    width: 100%;
    .button {
      width: 686rpx;
      margin: 0 auto;
    }
  }
  .button {
    // width: 328rpx;
    // border: 1rpx solid #2c9af1;
    height: 94rpx;

    width: 100%;
    background: #ffffff;
    margin-bottom: 30rpx;
    
    opacity: 1;
    border-radius: 16rpx;
    text-align: center;
    line-height: 94rpx;
    &.default {
      // color: #2c9af1;
      background-color: #2c9af1;
      color: #ffffff;
    }
    &.modify {
      // color: #f79672;
      // border: 1rpx solid #f79672;
      border: 1rpx solid #2c9af1;
      color: #2c9af1;
    }
    &.primary {
      color: #fff;
      background: #2c9af1;
      border-color: #2c9af1;
    }
  }
}
</style>
